<template>
  <div class="password-page">
    <div class="password-form">
      <div class="form-group">
        <div class="form-label">{{ t('userpassword_old') }}</div>
        <div class="input-wrapper">
          <input 
            type="password" 
            v-model="passwordForm.oldPassword" 
            :placeholder="t('userpassword_oldPlaceholder')"
            class="form-input"
          />
        </div>
      </div>
      
      <div class="form-group">
        <div class="form-label">{{ t('userpassword_new') }}</div>
        <div class="input-wrapper">
          <input 
            type="password" 
            v-model="passwordForm.newPassword" 
            :placeholder="t('userpassword_newPlaceholder')"
            class="form-input"
          />
        </div>
      </div>
      
      <div class="form-group">
        <div class="form-label">{{ t('userpassword_confirm') }}</div>
        <div class="input-wrapper">
          <input 
            type="password" 
            v-model="passwordForm.confirmPassword" 
            :placeholder="t('userpassword_confirmPlaceholder')"
            class="form-input"
          />
        </div>
      </div>
      
      <div class="form-button">
        <button @click="changePassword" :disabled="isSubmitting" class="submit-button">
          {{ isSubmitting ? t('userpassword_updating') : t('userpassword_change') }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入所需的依赖
import { editPassword } from '@/api/user';
import { closeToast, showDialog, showToast } from 'vant';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
const { t } = useI18n();
// 定义API响应类型
interface ApiResponse {
  code: number
  data?: any
  message?: string
}

// 初始化数据
const router = useRouter()
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
  type: 'LOGIN' as 'LOGIN' | 'TEL' | 'EMAIL'
})

const isSubmitting = ref(false)

// 方法定义
async function changePassword() {
  // 表单验证
  if (!passwordForm.oldPassword) {
    showDialog({
        title: t('userpassword_errorTitle'),
        message: t('userpassword_oldTip'),
        confirmButtonText: t('userpassword_know')
    })
    return
  }
  
  if (!passwordForm.newPassword) {
    showDialog({
        title: t('userpassword_errorTitle'),
        message: t('userpassword_newTip'),
        confirmButtonText: t('userpassword_know')
    })
    return
  }
  
  if (passwordForm.newPassword.length < 6) {
    showDialog({
        title: t('userpassword_errorTitle'),
        message: t('userpassword_newLenTip'),
        confirmButtonText: t('userpassword_know')
    })
    return
  }
  
  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    showDialog({
        title: t('userpassword_errorTitle'),
        message: t('userpassword_notMatch'),
        confirmButtonText: t('userpassword_know')
    })
    return
  }
  
  // 防止重复提交
  if (isSubmitting.value) return
  isSubmitting.value = true
  
  try {
    showToast({
      type: 'loading',
      message: t('userpassword_updating'),
      forbidClick: true,
      duration: 0
    })
    
    // 调用API修改密码
    const result = await editPassword({
      oldPassword: passwordForm.oldPassword,
      newPassword: passwordForm.newPassword,
      type: passwordForm.type
    })
    
    // 从返回数据中提取响应信息
    const response = result as unknown as ApiResponse
    
    // 根据返回结果处理
    if (response && response.code == 200) {
      // 清除loading提示
      closeToast()
      
      // 成功提示
      showToast({
        type: 'success',
        message: t('userpassword_success')
      })
      
      // 重置表单
      passwordForm.oldPassword = ''
      passwordForm.newPassword = ''
      passwordForm.confirmPassword = ''
      
      // 可选：返回上一页
      setTimeout(() => {
        router.back()
      }, 1500)
    } else {
      // 清除loading提示
      closeToast()
      
      // 失败处理
      showDialog({
        title: 'Kesalahan',
        message: t('userpassword_fail'),
        confirmButtonText: t('userpassword_ok')
      })
    }
  } catch (error: any) {
    // 清除loading提示
    closeToast()
    
    console.error('修改密码时出错:', error)
    showDialog({
      title: 'Kesalahan',
      message: error?.message || t('userpassword_failRetry'),
      confirmButtonText: t('userpassword_ok')
    })
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style lang="less" scoped>
.password-page {
  min-height: 100vh;
  padding: 20px;
  background: url('@/assets/images/user/Topbg.png') no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.password-form {
  width: 100%;
  max-width: 650px;
  background-color: rgba(246, 224, 202, 0.1);
  border-radius: 12px;
  padding: 30px 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  font-size: 16px;
  font-weight: 500;
  color: #f6e0ca;
  margin-bottom: 10px;
}

.input-wrapper {
  width: 100%;
}

.form-input {
  width: 100%;
  height: 50px;
  background-color: rgba(30, 30, 30, 0.6);
  border: none;
  border-radius: 8px;
  color: #f6e0ca;
  font-size: 14px;
  padding: 0 15px;
  outline: none;
  
  &::placeholder {
    color: rgba(246, 224, 202, 0.5);
  }
}

.form-button {
  margin-top: 30px;
}

.submit-button {
  width: 100%;
  height: 50px;
  background-color: #f6e0ca;
  border: none;
  border-radius: 25px;
  color: #3a2e2b;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.3s;
  
  &:hover {
    opacity: 0.9;
  }
  
  &:active {
    opacity: 0.8;
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}
</style>
